<!--
  -- 指标模板 by mingyue
 -->
<template>
  <div>
    <basic-container>
      <div>

        <!--列表页面-->
        <div>
          <div style="margin-bottom: 10px;">
            <el-button type="primary" @click="newBtn">新增</el-button>
            <el-button type="primary" @click="copyBtn">复制</el-button>
            <div class="pull-right">
              <el-button plain type="primary" @click="planPush">直接推送履约中流程操作</el-button>

            </div>
          </div>
          <el-table :data="nameTableData" v-loading="loadingFrom">
            <el-table-column prop="templateName" label="模板名称" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
            <el-table-column
              prop="isZmb"
              header-align="center"
              align="center"
              min-width="100"
              label="主模板"
            >
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.isEffective == '1'"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="scope.row.isZmb"
                  active-color="#17499a"
                  inactive-color="#999999"
                  @change="stateChange(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="isEffective" label="有效性" align="center">
              <template slot-scope="scope">
                <i v-if="scope.row.isEffective == 1" style="color: green;" class="el-icon-circle-check"></i>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 列表页 > 复制模板 -->
        <el-dialog
          width="30%"
          title="复制模板"
          :visible.sync="innerVisible"
          append-to-body
        >
          <el-form :model="detailForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex">
            <el-form-item label="模板名称" prop="templateName">
              <el-input v-model="detailForm.templateName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="detailCopy('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>
      </el-dialog>

      <el-dialog
          :title="dialogtitle"
          :visible.sync="mbstepsDialogVisible"
          width="80%"
        >

          <!--添加模板名称-->
          <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px" style="display:flex" :inline="true">
            <el-form-item label="模板名称" prop="templateName" style="width:22%">
              <el-input v-model="ruleForm.templateName"></el-input>
            </el-form-item>
            <el-form-item style="width:22%">
              <el-button type="primary" plain @click="submitForm('ruleForm')">确定</el-button>
            </el-form-item>
          </el-form>

          <!--添加模板成功 显示 模板保存和复制按钮-->
          <div style="display: block;margin-top: -54px;float: right;" v-if="tableData.length>1">
            <el-button type="primary" plain @click="saveBtn" v-loading.fullscreen.lock="fullscreenLoading2">模板保存</el-button>
            <el-button type="primary" plain @click="copyBtnDtail" v-loading.fullscreen.lock="fullscreenLoading2">复制</el-button>
          </div>

          <!--添加模板成功 显示 流程图-->
          <div  v-loading="loading">
            <div class="tiao_lc"  style="margin-bottom: 20px;" v-if="tableData.length>1">
              流程图
            </div>

            <!--流程 第一行-->
            <div class="bg_tiao" v-if="tableData.length>1"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;" v-if="tableData.length>1">
              <div class="text_dh">
                <div style="color:#0762c3;">开始</div>
                <img class="imgs" src="./start.png" alt="" @click="editmbsteps('该节点无配置')">
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;">创建考核</div>
                <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;">指标拟定</div>
                <div>
                  <div class="chenck_active" v-if="from1.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                </div>
                <el-checkbox v-model="from1.isjump" @change="valueChange(from1)">启用</el-checkbox>
              </div>
              <div class="text_dh">
                <div style="color:#0762c3;">委员会专员审核</div>
                <div>
                  <div class="chenck_active2" @click="editmbsteps('委员会专员审核')"><i class="el-icon-check checked"></i></div>
                </div>

              </div>
              <div class="text_dh" style="margin-right: 40px">
                <div style="color:#0762c3">委员会委员审定</div>
                <div>
                  <div class="chenck_active" v-if="from3.isjump" @click="editmbsteps('委员会委员审定')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                </div>
                <el-checkbox v-model="from3.isjump" @change="valueChange(from3)">启用</el-checkbox>
              </div>
            </div>

            <!--流程 第二行-->
            <div class="bg_tiaoTwo" v-if="tableData.length>1"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;margin-top:20px;" v-if="tableData.length>1">
              <div class="text_dh" style="margin-left: 90px">
                <div style="color:#0762c3;">发起填报</div>
                <div class="chenck_active" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
              </div>

              <div class="text_dh">
                <div style="color:#0762c3">指标填报</div>
                  <div  class="chenck_active" v-if="from4.isjump" @click="editmbsteps('该节点无配置')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                  <el-checkbox v-model="from4.isjump"  @change="valueChange(from4)">启用</el-checkbox>
              </div>

              <div class="text_dh">
                <div style="color:#0762c3">委员会专员汇总</div>
                <div>
                  <div  class="chenck_active2"  @click="editmbsteps('委员会专员汇总')"><i class="el-icon-check checked"></i></div>
                </div>
              </div>

              <div class="text_dh">
                <div style="color:#0762c3">领导审核</div>
                  <div  class="chenck_active" v-if="from6.isjump" @click="editmbsteps('领导审核')"><i class="el-icon-check checked2"></i></div>
                  <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                  <el-checkbox v-model="from6.isjump"  @change="valueChange(from6)">启用</el-checkbox>
              </div>

              <div class="text_dh">
                <div style="color:#0762c3">被考核人确认</div>
                <div  class="chenck_active" v-if="from7.isjump" @click="editmbsteps('被考核人确认')"><i class="el-icon-check checked2"></i></div>
                <div v-else class="point" @click="editmbsteps('该节点无配置')"></div>
                <el-checkbox v-model="from7.isjump"  @change="valueChange(from7)">启用</el-checkbox>
              </div>

              <div class="text_dh">
                <div style="color:#0762c3;">结束</div>
                <img class="imgs" src="./end.png" alt="" @click="editmbsteps('该节点无配置')">
              </div>
            </div>

            <!--流程节点 详情-->
            <div class="tiao_lc" style="margin-top: 20px; margin-bottom: 20px;" v-if="showType == '委员会专员审核'||showType == '委员会委员审定'||showType=='委员会专员汇总'||showType=='领导审核'||showType == '被考核人确认'||showType=='请点击节点进行配置'||showType == '该节点无配置'">
              {{showType}}
            </div>
            <div class="mb_bottom"  v-if="tableData.length>1">
              <el-form ref="form" :model="from2" label-width="200px" :inline="true"  class="form-inline" v-if="showType == '委员会专员审核'||showType == '委员会委员审定'||showType=='委员会专员汇总'||showType=='领导审核'||showType == '被考核人确认'">

                <el-form-item label="委员会专员审核人员：" v-if="showType == '委员会专员审核'">
                  <el-button plain type="primary"  @click="choosePer(from2)">选择</el-button>
                </el-form-item>

                <el-form-item label="委员会委员审定类型："  v-if="showType == '委员会委员审定'">
                  <el-select v-model="from3.tagType" placeholder="请选择" @change="valueChange(from3)">
                    <el-option
                      v-for="item in wboptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="委员会委员审定人员：" v-if="showType == '委员会委员审定'">
                  <el-button plain type="primary"  @click="choosePer(from3)">选择</el-button>
                </el-form-item>


                <el-form-item label="委员会专员汇总人员："  v-if="showType == '委员会专员汇总'">
                  <el-button plain type="primary"  @click="choosePer(from5)">选择</el-button>
                </el-form-item>

                <el-form-item label="领导审核类型:" v-if="showType == '领导审核'">
                  <el-select v-model="from6.tagType" placeholder="请选择" @change="valueChange(from6)">
                    <el-option
                      v-for="item in wboptions"
                      :label="item.label"
                      :key="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="领导审核人员：" v-if="showType == '领导审核'">
                  <el-button plain type="primary"  @click="choosePer(from6)">选择</el-button>
                </el-form-item>

                <el-form-item label="是否可申诉:" v-if="showType == '被考核人确认'">
                  <el-select v-model="from7.isauto" placeholder="请选择" @change="valueChange(from7)">
                    <el-option
                      v-for="item in options"
                      :label="item.label"
                      :key="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>


              </el-form>



              <div class="text_dh" v-else>
                <svg width="150" viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg>
                <span style="margin: 0;-size: 14px;color: #909399;">暂无节点配置</span>
              </div>
              <div class="per" v-if="showType == '委员会专员审核'||showType == '委员会委员审定'||showType == '委员会专员汇总'||showType == '领导审核'">
                <span v-for="item in perList" :key="item.userName">{{item.userName}}、</span>
              </div>
            </div>
          </div>
        </el-dialog>

        <!--复制模板 > 弹框-->
        <el-dialog title="复制模板" :visible.sync="dialogVisible" width="32%" append-to-body>
          <el-form ref="formcopy" :rules="rulescopy" :model="formcopy" label-width="120px">
            <el-form-item label="模板名称" style="width: 420px" prop="templateNamecopy">
              <el-input v-model="formcopy.templateNamecopy"></el-input>
            </el-form-item>
            <el-form-item label="模板选择" prop="per">
              <el-select v-model="formcopy.tempId" placeholder="请选择模板" class="xiaLa" style="width: 300px" >
                <el-option v-for="(item,index) in tempData" :key="index" :label="item.templateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitFormcopy('formcopy')">确 定</el-button>
              <el-button @click="backBtn">取 消</el-button>
          </span>
        </el-dialog>


        <el-dialog
          title="流程操作"
          :visible.sync="zbmbvisible"
          width="60%"
          top="8vh"
        >
          <el-row>
            <el-form
              :model="dataForm"
              ref="dataForm"
              label-width="130px"
              class="demo-ruleForm"
            >
              <div>
                <el-row>
                  <el-col :span="24">
                    <el-col :span="8">
                      <el-form-item label="考核周期">
                        <el-select
                          v-model="dataForm.assessId"
                          placeholder="请选择周期"
                          class="xiaLa"
                          style="width: 100%"
                          :clearable="true"
                          @change="selectBlur"
                        >
                          <el-option
                            v-for="(item, index) in kezqsList"
                            :key="index"
                            :label="item.name"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>

                    </el-col>
                    <el-col :span="2">
                      &nbsp;
                    </el-col>
                    <el-col :span="6">
                      <el-button plain type="primary" @click="goPush">直接推送</el-button>
                    </el-col>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="24">
                    <el-col :span="24">
                      <span style="font-size: 16px;color:red;margin-left: 55px;">注明：考核周期内“创建中”状态数据，将会在{{getTime}}自动推送到“履约中”，也可以在此处手动执行。</span>
                    </el-col>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-row>

          <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain @click="zbmbvisible = false"
          >关闭</el-button
          >

        </span>
        </el-dialog>
      </div>
    </basic-container>

    <!--选择人员 组件-->
    <sortingPerChooseDialog :sortingPerChooseDialogData="sortingPerChooseDialogData"
                            @sortingPerChooseDialogChild="sortingPerChooseDialogChild">
    </sortingPerChooseDialog>
  </div>
</template>
<script>
    import {getTempList,tempage,saveTemplateName,isExsitTemplateName,
        saveTemplatehang,effective,deleteBatchtem,copyTemplateMainAndDetail,putObjstateChangeZb,createTb,getFilldateById } from "@/api/dailyExamine/targetExamine/sjtemplate";
    import sortingPerChooseDialog from '@/views/dailyExamine/components/sortingPerChooseDialog.vue'

    import { defaultList } from "@/api/dailyExamine/targetExamine/khGather"; //接口api

    import { getKhzqSelect } from "@/api/dailyExamine/eventExamine/event.js";
    export default {
        components: {
            sortingPerChooseDialog
        },
        data(){
            return{
                nameTableData:[],
                tableData:[],
                tempData:[],
                formcopy: {},
                dialogVisible: false,
                perList:[],
                disabled:false,
                sortingPerChooseDialogData:{},
                loading:false,
                options:[
                    {label:'是',value:"1"},
                    {label:'否',value:"0"},
                ],
                wboptions:[
                    {label:'会签',value:"1"},
                    {label:'顺序签',value:"0"},
                ],
                id:"",
                from1:{}, //指标拟定
                from2:{}, //委员会专员审核
                from3:{}, //委员会委员审定
                from4:{}, //指标填报
                from5:{}, //委员会专员汇总
                from6:{}, //领导审核
                ruleForm:{
                    templateName:"",
                },
                rulescopy: {
                    templateNamecopy: [
                        { required: true, message: "请输入模板名称", trigger: "blur" },
                    ],
                },
                rules:{
                    templateName: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                },
                checked:false,
                showType:"",
                mbstepsDialogVisible:false,
                dialogtitle:"",
                fullscreenLoading2:false,
                loading:false,
                innerVisible:false,
                detailForm:{},
                zbmbvisible:false,
                dataForm:[],
                kezqsList:[],
                getTime:"",
            }
        },
        watch:{},
        created(){
            this.getemNameList();

        },
        methods:{
            // 查询总部启动的考核
            planPush() {
                defaultList()
                    .then(r => {
                        if (r.data.code == 0) {
                            getKhzqSelect().then(res => {
                                res.data.data.map(it => {
                                    let item = {
                                        name:it.period,
                                        value:it.id
                                    }

                                    this.kezqsList.push(item)
                                });
                                if(r.data.data.id == 1){
                                    this.dataForm.assessId = "";
                                }else{
                                    this.dataForm.assessId = r.data.data.id;
                                }

                            });

                            getFilldateById(0).then(res => {

                                if(res.data.code == 0) {
                                    this.getTime = res.data.data.autoFillDdate.slice(0, 10);
                                }else{
                                    this.$message.error(r.data.msg);
                                }
                            });
                            //
                        } else {

                        }
                    })
                    .catch(err => {

                    });

                this.zbmbvisible = true;
            },
            selectBlur(e) {
                getFilldateById(e).then(res => {

                    if(res.data.code == 0) {
                        this.getTime = res.data.data.autoFillDdate.slice(0, 10);
                    }else{
                        this.$message.error(r.data.msg);
                    }
                });

                //this.getForm.period = e.target.value
                //选择的时候强制刷新
                this.$forceUpdate()

            },
            goPush(){
                createTb(
                    Object.assign(
                      {
                          assessId: this.dataForm.assessId

                      }
                    )
                )
                    .then(r => {
                        if(r.data.code == 0){
                            this.$message.success("推送成功");

                        } else {
                            this.$message.error(r.data.msg);

                        }

                    })
                    .catch(err => {

                    });
            },
            newBtn(){
                this.dialogtitle = "新增"
                this.tableData = [];
                this.id = "";
                this.from1 = {};
                this.from2 = {};
                this.from3 = {};
                this.from4 = {};
                this.from5 = {};
                this.from6 = {};
                this.from7 = {};
                this.ruleForm = {};
                this.mbstepsDialogVisible = true;
                this.showType = "";
            },
            copyBtn() {
                this.dialogVisible = true;
                this.formcopy = {};
                effective({
                    tagName:"指标考核"
                }).then((res) => {
                    console.log( res.data.data)
                    this.tempData = res.data.data;
                    this.$forceUpdate;
                });
            },
            copyBtnDtail(){
                this.ruleForm = {};
                this.innerVisible = true;
            },
            detailCopy(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        isExsitTemplateName({
                            templateName:this.detailForm.templateName,
                            tagName:"指标考核"
                        }).then((res)=>{
                            if(!res.data.data.flag){
                                var parmas={
                                    newtempName:this.detailForm.templateName,
                                    oldId:this.id,
                                }
                                this.save(parmas)
                            }else{
                                this.$message.warning("模板名称已存在")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            backBtn(){
                this.dialogVisible = false;
                this.innerVisible = false;
                this.formcopy = {};
                this.tempData = [];

            },
            // 节点编辑
            editmbsteps(e){
                this.showType = e;
                switch (e) {
                    case "委员会专员审核":
                        this.perList = JSON.parse(this.from2.userjson).reverse();
                        break ;
                    case "委员会委员审定":
                        this.perList = JSON.parse(this.from3.userjson).reverse();
                        break ;
                    case "委员会专员汇总":
                        this.perList = JSON.parse(this.from5.userjson).reverse();
                        break ;
                    case "领导审核":
                        this.perList = JSON.parse(this.from6.userjson).reverse();
                        break ;
                    default:
                        break ;
                }

            },

            //触发 “启用”
            valueChange(e){
                var row = {};
                switch (e.stepName) {
                    case "指标拟定":
                        row = this.from1 ;
                        break ;
                    case "委员会委员审定":
                        row = this.from3 ;
                        break ;
                    case "指标填报":
                        row = this.from4 ;
                        break ;
                    case "领导审核":
                        row = this.from6 ;
                        break ;
                    case "被考核人确认":
                        row = this.from7 ;
                        break ;
                    default:
                        break ;
                }

                if (e.stepName!='委员会专员审核' ||e.stepName!='委员会专员汇总' ){
                     if(e.stepName=='指标拟定' || e.stepName == '指标填报'){
                         this.editmbsteps("该节点无配置") ;
                     }else{
                         e.isjump == true ?  this.editmbsteps(e.stepName) : this.editmbsteps("该节点无配置") ;
                     }
                }

               row.isjump = row.isjump == true ? false : true ;

               this.savetem(row) ;

            },
            savetem(row){
                saveTemplatehang(row).then((res)=>{
                    this.$message.closeAll();
                    this.$message.success(row.stepName + '保存成功');
                    this.fngetTempList()
                }).catch(res=>{
                })
            },
            submitFormcopy(formName) {
                var parmas={
                    newtempName:this.formcopy.templateNamecopy,
                    oldId:this.formcopy.tempId,
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        isExsitTemplateName({
                            templateName:this.formcopy.templateNamecopy,
                            tagName:"指标考核" //改为 指标考核
                        }).then((res)=>{
                            console.log(res.data.data.flag);
                            if(res.data.data.flag){
                                this.$message.closeAll();
                                this.$message.warning("模板名称"+this.formcopy.templateNamecopy+"已存在");
                            }else{
                                this.save(parmas)
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            save(parmas){
                copyTemplateMainAndDetail(parmas).then((response)=>{
                    if(response.data.code == 0){
                        this.$message.closeAll();
                        this.$message.success(response.data.data);
                        this.backBtn();
                        this.getemNameList();
                    }
                })
            },
            // 新增模板
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        isExsitTemplateName({
                            templateName:this.ruleForm.templateName,
                            tagName:"指标考核" //改为 指标考核
                        }).then((res)=>{
                            if(!res.data.data.flag){
                                saveTemplateName({
                                    templateName:this.ruleForm.templateName,
                                    id:this.id,
                                    tagName:"指标考核" //改为 指标考核
                                }).then((res)=>{
                                    this.id = res.data.data.id;
                                    this.fngetTempList(this.id);
                                    this.getemNameList();
                                })
                            }else{
                                this.$message.warning("模板名称已存在")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //获取模板列表
            getemNameList(){
                this.loadingFrom = true;
                tempage({
                    tagName:"指标考核" //改为 指标考核
                }).then((res)=>{
                    this.loadingFrom = false;
                    this.nameTableData = res.data.data.records;
                    this.showType = "请点击节点进行配置"
                })
            },
            // 模板提交至有效
            saveBtn(){
                var params = {
                    isEffective:1,
                    id:this.id,
                    tagName:"指标考核"  //改为 指标考核
                }

                if(JSON.parse(this.from2.userjson).length==0){
                    this.$message.warning("请完成“委员会专员审核”节点的配置")
                }else if(this.from3.isjump == true && (this.from3.tagType == null || JSON.parse(this.from3.userjson).length==0)){
                    this.$message.warning("请完成“委员会委员审定”节点的配置")
                }else if(JSON.parse(this.from5.userjson).length==0){
                    this.$message.warning("请完成“委员会专员汇总”节点的配置")
                }else if(this.from6.isjump == true && (this.from6.tagType == null || JSON.parse(this.from6.userjson).length==0)){
                    this.$message.warning("请完成“领导审核”节点的配置")
                }else if(this.from7.isjump == true && this.from7.isauto == null ){
                    this.$message.warning("请完成“被考核人确认”节点的配置")
                }else{
                    this.fullscreenLoading2 = true;
                    saveTemplateName(params).then((res)=>{
                        this.$message.success('提交成功');
                        this.fullscreenLoading2 = false;
                        this.getemNameList();
                        this.mbstepsDialogVisible = false;
                    }).catch(res=>{
                        this.fullscreenLoading2 = false;
                    })
                }
            },

            edit(row){
                this.dialogtitle = row.templateName;
                this.ruleForm.templateName = row.templateName ;
                this.id = row.id;
                this.showType = "请点击节点进行配置";
                this.fngetTempList();
            },
            // 编辑
            fngetTempList(){
                var params ={
                    mainId:this.id
                }
                this.loading = true;
                getTempList(params).then((res)=>{
                    this.tableData =  res.data.data;
                    this.tableData.map( it=>{
                            it.isjump = it.isjump == 'true' ? false : true ;

                    })
                     this.from1 = this.tableData[0] ;
                     this.from2 = this.tableData[1] ;
                     this.from3 = this.tableData[2] ;
                     this.from4 = this.tableData[3] ;
                     this.from5 = this.tableData[4] ;
                     this.from6 = this.tableData[5] ;
                     this.from7 = this.tableData[6] ;

                    this.mbstepsDialogVisible = true;
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                })
            },
            delBtn(row){
                var params = {
                    ids:row.id
                }
                this.$confirm('确定要删除么？', "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(_ => {
                    deleteBatchtem(params).then((res)=>{
                        this.$message.success('删除成功');
                        this.getemNameList()
                    })
                }).catch(_ => {
                });
            },
            choosePer(row){

                if(row.stepName=='委员会专员审核'||row.stepName=='委员会专员汇总'){
                    row.isjump = !row.isjump ;
                }

                this.sortingPerChooseDialogData = {
                    visible:true,
                    rows:row,
                    perLsit:JSON.parse(row.userjson).reverse(),
                    types:"allChoose"
                }
            },
            sortingPerChooseDialogChild(res){
                this.fngetTempList();
                this.editmbsteps(this.showType)
            },
            stateChange: function (row) {
                var params = {
                    id: row.id,
                    isZmb: row.isZmb,
                };
                putObjstateChangeZb(params)
                    .then((data) => {
                        console.log(data)
                        if (data.data.code == 0 ) {
                            this.$message.success("操作成功");
                            this.getemNameList();
                        } else {
                            this.$message.warning(data.data.msg);

                            this.getemNameList();
                        }


                    })
                    .catch(() => {
                        // loading();
                    });
            },
            searchChange(form, done) {
                this.searchForm = form;
                this.page.currentPage = 1;
                this.getList(this.page, form);
                done();
            },
        }

    }
</script>
<style scoped>
  .tiao_lc{
    width: 100%;
    background: #eeeeee;
    padding: 10px;
    color:#0762c3;
  }
  .text_dh{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mb_bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 230px;
  }
  .bg_tiao{
    width: 100%;
    background: #a9c6ea;
    height: 4px;
    top: 45px;
    position: relative;
    z-index: 2;
  }
  .bg_tiaoTwo{
    width: 100%;
    background: #a9c6ea;
    height: 4px;
    top: 65px;
    position: relative;
    z-index: 2;
  }
  .point{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #dbe2f2;
    box-shadow: 4px 4px 6px #888888;
  }
  .chenck_active{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #0a66c2;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
  }
  .chenck_active2{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 4px 4px 6px #888888;
    text-align: center;
  }
  .imgs{
    width: 31px;
    height: 31px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 4px 4px 6px #888888;
  }
  .checked{
    font-size:20px;
    border-radius: 50%;
    color: #0a66c2;
    line-height: 31px;
    background:#fff;
  }
  .checked2{
    color:#fff;
    font-size:20px;
    line-height: 31px;
    text-align: center;
    background: #0a66c2;
    border-radius: 50%;
  }
  .per{
    width: 80%;
    height: 84px;
    border-radius: 5px;
    border: 2px #ededf1 solid;
    padding: 20px;
  }
</style>
